<template>
  <div>
    <van-nav-bar title="会员权益" left-text="" left-arrow @click-left="onClickLeft" />
    <div class="box">
      <div class="top">
        <img src="../../img/member.png" alt="" class="Timg">
        <p class="p1"><b class="ka">会员卡激活</b><br><span class="fw">激活后即可享受会员权益服务</span></p>
        <button @click="btn" class="mbtn">立即激活</button>
      </div>
      <div class="hyfw">
        <p>会员服务</p>
        <div class="imgs">
          <img src="../../img/i1.png" alt="">
          <img src="../../img/i2.png" alt="">
          <img src="../../img/i3.png" alt="">
          <img src="../../img/i4.png" alt="">
          <img src="../../img/i5.png" alt="">
          <img src="../../img/i6.png" alt="">
          <img src="../../img/i7.png" alt="">
        </div>
      </div>
      <p class="qu">渠道合作热线：<a href="">17600355186</a></p>
    </div>
  </div>
</template>
<script setup lang="ts">
const onClickLeft = () => history.back();
</script>
<style scoped>
.box{
  width: 100%;
  height: 1240px;
  background-color: #F6F6F6;
  position: relative;
  padding: 20px 0;
}
.top {
  width: 94%;
  height: 150px;
  background-color: #EBD4AB;
  border-radius: 15px;
  display: flex;
  margin-left: 3%;
}

.Timg {
  width: 90px;
  height: 90px;
  border-radius: 20px;
  margin-left: 30px;
  margin-top: 30px;
}

.p1 {
  margin-left: 30px;
  margin-top: 30px;
}

.ka {
  font-size: 30px;
  font-weight: 600;
  color: #482F0C;
}

.fw {
  font-size: 23px;
  color: #B49A79;
}

.mbtn {
  width: 20%;
  height: 60px;
  color: #FEDAA5;
  border: none;
  border-radius: 10px;
  background-color: #854900;
  position: absolute;
  right: 6%;
  top: 5.5%;
  z-index: 999;
}
.hyfw{
  width: 94%;
  height: 850px;
  margin-left: 3%;
  margin-top: 20px;
  background-color: #fff;
  border-radius: 15px;
}
.hyfw>p{
  font-size: 30px;
  padding: 20px;
}
.imgs{
  display: flex;
  flex-wrap: wrap;
}
.imgs>img{
  width: 45%;
  height: 170px;
  margin-left: 3%;
  margin-bottom: 20px;
  border-radius: 8px;
 }
.qu{
  text-align: center;
  margin-top: 30px;
  font-size: 30px;
  color: #A8A8A8;
}
.qu>a{
  color: #CCB49D;
}
</style>
